<template>
    <div class="index">
        <header class="admin-header" :style="`transform: translateX(${left}px); width: calc(100% - ${left}px);`">
            <div class="menu-btn" @click="changeAsideStatus">
                <el-icon size="24">
                    <Expand v-if="asideStatus == 0" />
                    <Fold v-else />
                </el-icon>
            </div>

            <!-- 添加面包屑导航 -->
            <div class="breadcrumb-container">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
                        {{ item.title }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <VPopover class="avatar-wrapper" trigger="click"
                pop-style="padding-top: 20px; transform: translateX(calc(-100% + 20px));">
                <template #reference>
                    <div class="avatar">
                        <img :src="user.avatar_url" :alt="`${user.nickname}的头像`">
                    </div>
                </template>
                <template #content>
                    <div class="v-pop">
                        <div class="v-pop-top">
                            <div class="v-pop-top-content" @click="noPage">
                                <div class="user-avatar">
                                    <img :src="user.avatar_url" :alt="`${user.nickname}的头像`">
                                </div>
                                <div class="user-text">
                                    <div class="nickname">{{ user.nickname }}</div>
                                    <div class="description">{{ user.description }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="v-pop-middle">
                            <div class="v-pop-item" @click="noPage">
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>个人账户</span>
                            </div>
                            <div class="v-pop-item" @click="noPage">
                                <el-icon>
                                    <Calendar />
                                </el-icon>
                                <span>日程安排</span>
                            </div>
                            <div class="v-pop-item" @click="noPage">
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                <span>部门团队</span>
                            </div>
                            <div class="v-pop-item" @click="noPage">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                                <span>帮助中心</span>
                            </div>
                        </div>
                        <div class="v-pop-bottom">
                            <div class="v-pop-item" @click="logout">
                                <el-icon>
                                    <SwitchButton />
                                </el-icon>
                                <span>退出登录</span>
                            </div>
                        </div>
                    </div>
                </template>
            </VPopover>
        </header>
        <aside class="admin-aside" :class="{ 'collapsed': asideStatus === 0 }"
            :style="asideStatus == 0 ? `width: ${collapsedWidth}px;` : asideStatus == 1 ? `width: ${expandedWidth}px;` : `transform: translateX(${asideOffsetX}px);`">
            <div class="aside-top">
                <a class="logo" href="http://localhost:8787" target="_blank">
                    <img v-if="asideStatus !== 0" src="~assets/img/fyzeevoo-pink.png" alt="Logo">
                    <img v-else src="~assets/img/fyzeevoo-icon.png" alt="Logo" class="logo-small">
                </a>
            </div>
            <div class="aside-middle">
                <el-menu :default-openeds="defOpenMenu" :default-active="active" class="nav-menu"
                    :collapse="asideStatus === 0" router="true" unique-opened>
                    <el-menu-item index="/home">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <template #title><span>首页</span></template>
                    </el-menu-item>
                    <el-menu-item index="/data">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <template #title><span>数据中心</span></template>
                    </el-menu-item>
                    <el-sub-menu index="/content">
                        <template #title>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>内容管理</span>
                        </template>
                        <el-menu-item index="/content/carousel">
                            <el-icon>
                                <Picture />
                            </el-icon>
                            <span>轮播图管理</span>
                        </el-menu-item>
                        <el-menu-item index="/content/hot-search">
                            <el-icon>
                                <Search />
                            </el-icon>
                            <span>热搜管理</span>
                        </el-menu-item>
                        <el-menu-item index="/content/ranking">
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>排行管理</span>
                        </el-menu-item>
                        <el-menu-item index="/content/tag">
                            <el-icon>
                                <PriceTag />
                            </el-icon>
                            <span>标签管理</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="/review">
                        <template #title>
                            <el-icon>
                                <Checked />
                            </el-icon>
                            <span>审核管理</span>
                        </template>
                        <el-menu-item index="/review/video">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>
                            <span>视频审核</span>
                        </el-menu-item>
                        <el-menu-item index="/review/article">
                            <el-icon>
                                <Reading />
                            </el-icon>
                            <span>文章审核</span>
                        </el-menu-item>
                        <el-menu-item index="/review/avatar">
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <span>头像审核</span>
                        </el-menu-item>
                        <el-menu-item index="/review/dynamic">
                            <el-icon>
                                <Share />
                            </el-icon>
                            <span>动态审核</span>
                        </el-menu-item>
                        <el-menu-item index="/review/comment">
                            <el-icon>
                                <ChatDotRound />
                            </el-icon>
                            <span>评论审核</span>
                        </el-menu-item>
                        <el-menu-item index="/review/danmu">
                            <el-icon>
                                <ChatLineRound />
                            </el-icon>
                            <span>弹幕审核</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="/case">
                        <template #title>
                            <el-icon>
                                <Warning />
                            </el-icon>
                            <span>举报申诉</span>
                        </template>
                        <el-menu-item index="/case/report">
                            <el-icon>
                                <Bell />
                            </el-icon>
                            <span>举报受理</span>
                        </el-menu-item>
                        <el-menu-item index="/case/appeal">
                            <el-icon>
                                <DocumentChecked />
                            </el-icon>
                            <span>申诉受理</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="/system">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/system/user">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/system/role">
                            <el-icon>
                                <Key />
                            </el-icon>
                            <span>角色管理</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="aside-bottom">
                <div class="system-info">
                    <span>FyZeeVoo Admin v0.0.1</span>
                </div>
            </div>
        </aside>
        <div class="masking" @click="changeAsideStatus" :style="asideStatus == 0 ? `display: ${maskingDisplay}; opacity: 0; transition: opacity 0.3s;`
            : asideStatus == 1 && isMiniWidth ? `display: ${maskingDisplay}; opacity: 1; transition: opacity 0.3s;`
                : asideStatus == 1 && !isMiniWidth ? `display: ${maskingDisplay}; opacity: 0; transition: opacity 0.3s;`
                    : `display: ${maskingDisplay}; opacity: ${maskingOpacity};`"></div>
        <main class="admin-main" :style="`padding-left: ${left}px;`">
            <!-- 添加页面索引导航 -->
            <div class="page-nav-container">
                <div class="page-title">
                    <h2>{{ currentPageTitle }}</h2>
                </div>
                <div class="page-actions">
                    <el-button size="small" icon="Refresh" plain @click="refreshPage">刷新</el-button>
                </div>
            </div>
            <router-view v-if="!isRefreshing"></router-view>
        </main>
    </div>
</template>

<script>
let hideTimer;
import VPopover from '@/components/popover/VPopover.vue';
import { ElMessage } from 'element-plus';

export default {
    name: "IndexVue",
    components: {
        VPopover,
    },
    data() {
        return {
            expandedWidth: 220,  // 侧边栏展开宽度，增加一些宽度以容纳图标
            collapsedWidth: 74,  // 侧边栏折叠宽度
            left: 220,  // 左边侧栏展开时宽度，默认展开状态
            isMiniWidth: false, // 是否窄窗宽
            asideStatus: 1, // 0关闭 1打开 2移动中
            asideOffsetX: 0,    // 移动偏移量
            // 蒙版的显隐
            maskingDisplay: "none",
            maskingOpacity: 0,
            active: "", // 侧栏活动项
            path: ["/home", "/data", "/content/carousel", "/content/hot-search", "/content/ranking", "/review/video",
                "/review/article", "/review/avatar", "/review/dynamic", "/review/comment", "/review/danmu", "/case/report",
                "/case/appeal", "/system/role", "/system/user"],   // 用于判断当前活动页
            defOpenMenu: [],    // 默认展开的子菜单，空数组表示所有子菜单都不展开
            breadcrumbItems: [], // 面包屑导航项
            currentPageTitle: '首页', // 当前页面标题
            isRefreshing: false, // 是否正在刷新页面

            // 路由与标题映射
            routeTitleMap: {
                '/home': '首页',
                '/data': '数据中心',
                '/content': '内容管理',
                '/content/carousel': '轮播图管理',
                '/content/hot-search': '热搜管理',
                '/content/ranking': '排行管理',
                '/content/tag': '标签管理',
                '/review': '审核管理',
                '/review/video': '视频审核',
                '/review/article': '文章审核',
                '/review/avatar': '头像审核',
                '/review/dynamic': '动态审核',
                '/review/comment': '评论审核',
                '/review/danmu': '弹幕审核',
                '/case': '举报申诉',
                '/case/report': '举报受理',
                '/case/appeal': '申诉受理',
                '/system': '系统管理',
                '/system/user': '用户管理',
                '/system/role': '角色管理',
            }
        }
    },
    computed: {
        user() {
            return this.$store.state.user;
        },
    },
    methods: {
        initSlide() {
            let direct = 0; // 0未定方向 1上下 2左右
            let startX, startY, currentX, currentY, offsetX, offsetY, lastX;
            this.touchStartHandler = (e) => {
                if (this.asideStatus != 1) return;
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                lastX = e.touches[0].clientX;
            }
            this.touchMoveHandler = (e) => {
                if (this.asideStatus == 0 || direct == 1) return;
                if (currentX != null) lastX = currentX;
                currentX = e.touches[0].clientX;
                currentY = e.touches[0].clientY;
                offsetX = Math.abs(currentX - startX);
                offsetY = Math.abs(currentY - startY);
                if (direct != 2 && offsetY >= 5) {
                    direct = 1;
                    return;
                }
                if (offsetX >= 5) {
                    direct = 2;
                    this.asideStatus = 2;
                    e.preventDefault();
                }
                if (direct == 2) {
                    this.asideOffsetX += currentX - lastX;
                    this.asideOffsetX = Math.min(0, this.asideOffsetX);
                    this.asideOffsetX = Math.max(-this.expandedWidth, this.asideOffsetX);
                    this.maskingOpacity = 1 - (this.asideOffsetX / (-this.expandedWidth));
                }
            }
            this.touchEndHandler = () => {
                if (direct == 2 && currentX - lastX > 0) {
                    // 打开
                    this.asideStatus = 1;
                    this.asideOffsetX = 0;
                    this.maskingOpacity = 1;
                    this.show();
                } else if (direct == 2 && currentX - lastX <= 0) {
                    // 关闭
                    this.asideStatus = 0;
                    this.asideOffsetX = -this.expandedWidth;
                    this.maskingOpacity = 0;
                    this.hide();
                }
                direct = 0;
                currentX = null;
            }
            document.addEventListener('touchstart', this.touchStartHandler);
            document.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
            document.addEventListener('touchend', this.touchEndHandler);
        },

        // 蒙版的显隐
        show() {
            this.maskingDisplay = "";
        },
        hide() {
            hideTimer = setTimeout(() => {
                this.maskingDisplay = "none";
            }, 300);
        },

        // 打开或关闭侧栏
        changeAsideStatus() {
            if (this.asideStatus == 0) {
                // 打开菜单栏
                this.asideStatus = 1;
                if (!this.isMiniWidth) {
                    this.left = this.expandedWidth;
                } else {
                    clearTimeout(hideTimer);    // 清除计时器，防抖
                    this.asideOffsetX = 0;
                    this.maskingOpacity = 1;
                    this.show();
                }
            } else if (this.asideStatus == 1) {
                // 关闭菜单栏
                this.asideStatus = 0;
                if (!this.isMiniWidth) {
                    this.left = this.collapsedWidth;
                } else {
                    this.asideOffsetX = -this.expandedWidth;
                    this.maskingOpacity = 0;
                    this.hide();
                }
            }
        },

        // 判断是否小窗
        changeWidth() {
            if (window.innerWidth < 1265) {
                this.isMiniWidth = true;
            } else {
                this.isMiniWidth = false;
            }
        },

        // 退出登录
        logout() {
            this.$store.dispatch("logout");
        },

        noPage() {
            ElMessage.warning("该功能暂未开放");
        },

        // 根据当前路由生成面包屑导航
        updateBreadcrumb() {
            const path = this.$route.path;
            const items = [];

            if (path === '/home') {
                this.breadcrumbItems = [];
                this.currentPageTitle = '首页';
                return;
            }

            // 将路径拆分成各级别
            const pathParts = path.split('/').filter(Boolean);
            let currentPath = '';

            for (const part of pathParts) {
                currentPath += '/' + part;
                if (this.routeTitleMap[currentPath]) {
                    items.push({
                        title: this.routeTitleMap[currentPath],
                        path: currentPath
                    });
                }
            }

            this.breadcrumbItems = items;
            this.currentPageTitle = items.length > 0 ? items[items.length - 1].title : '首页';
        },

        // 刷新当前页面
        refreshPage() {
            // 添加旋转动画效果
            const refreshBtn = document.querySelector('.page-actions .el-button');
            refreshBtn.classList.add('refreshing');

            // 使用isRefreshing标志控制组件重新渲染
            this.isRefreshing = true;

            // 刷新数据 - 这里可以触发Vuex的刷新数据action
            if (Object.prototype.hasOwnProperty.call(this.$store, 'dispatch')) {
                const currentRoute = this.$route.path;
                // 根据不同路由派发不同的刷新action
                if (currentRoute.includes('/review/video')) {
                    this.$store.dispatch('refreshVideoReviewData');
                } else if (currentRoute.includes('/home')) {
                    this.$store.dispatch('refreshDashboardData');
                } else {
                    // 针对其他路由的刷新逻辑
                    this.$store.dispatch('refreshPageData', currentRoute);
                }
            }

            // 短暂延迟后恢复组件渲染
            setTimeout(() => {
                this.isRefreshing = false;

                // 移除动画类
                setTimeout(() => {
                    refreshBtn.classList.remove('refreshing');
                    ElMessage.success('数据已刷新');
                }, 500);
            }, 600);
        }
    },
    created() {
        // 初始化数据，如果是小窗的话
        if (window.innerWidth < 1265) {
            this.isMiniWidth = true;
            this.left = this.collapsedWidth;
            this.asideStatus = 0;
            this.asideOffsetX = -this.expandedWidth;
        }
        for (let i = 0; i < this.path.length; i++) {
            if (this.$route.path.startsWith(this.path[i])) {
                this.active = this.path[i].slice();
                break;
            }
        }

        // 初始化面包屑
        this.updateBreadcrumb();
    },
    mounted() {
        this.initSlide();
        // 监听窗口大小变化，判断是否小窗
        window.addEventListener('resize', this.changeWidth);
    },
    unmounted() {
        document.removeEventListener('touchstart', this.touchStartHandler);
        document.removeEventListener('touchmove', this.touchMoveHandler, { passive: false });
        document.removeEventListener('touchend', this.touchEndHandler);
        window.removeEventListener('resize', this.changeWidth);
    },
    watch: {
        "isMiniWidth"(current, last) {
            if (current && !last && this.asideStatus == 1) {
                // 从大屏转小屏并且菜单栏正在打开中，就关闭菜单栏和蒙版
                this.left = this.collapsedWidth;
                this.asideStatus = 0;
                this.asideOffsetX = -this.expandedWidth;
                this.maskingOpacity = 0;
                this.hide();
            } else if (!current && last && this.asideStatus == 1) {
                // 从小屏转大屏并且菜单栏正在打开中，就关闭蒙版
                this.left = this.expandedWidth;
                this.maskingOpacity = 0;
                this.hide();
            }
        },
        "$route"() {
            // 路由变化时更新面包屑
            this.updateBreadcrumb();

            // 更新侧边栏活动项
            for (let i = 0; i < this.path.length; i++) {
                if (this.$route.path.startsWith(this.path[i])) {
                    this.active = this.path[i].slice();
                    break;
                }
            }
        }
    }
}
</script>

<style scoped>
.index {
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-width: 100%;
    min-height: 100dvh;
    position: relative;
}

.admin-header {
    position: fixed;
    top: 0px;
    z-index: 1005;
    height: 64px;
    background-color: #fff;
    box-shadow: 0 2px 15px -1px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: var(--text1);
    transition: width 0.3s, transform 0.3s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 添加更明显的阴影效果 */
    background-color: white;
    /* 确保背景为白色 */
    margin-right: 8px;
    /* 增加右侧边距 */
}

.menu-btn:hover {
    background-color: var(--graph_bg_thin);
    color: var(--brand_pink);
    box-shadow: 0 2px 10px rgba(233, 30, 99, 0.15);
    /* 悬停时增强阴影效果 */
}

/* 面包屑导航容器 */
.breadcrumb-container {
    flex: 1;
    padding: 0 16px;
}

.avatar-wrapper {
    border-radius: 50%;
    margin: 0 8px;
}

.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
    overflow: hidden;
}

.avatar:hover {
    border-color: var(--brand_pink);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.2);
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.v-pop {
    position: relative;
    width: 250px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.v-pop-top,
.v-pop-middle {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.v-pop-bottom {
    padding: 8px 0;
}

.v-pop-top-content {
    display: flex;
    align-items: center;
    height: 80px;
    cursor: pointer;
    padding: 0 16px;
    transition: background-color 0.2s;
}

.v-pop-top-content:hover {
    background-color: var(--graph_bg_regular);
}

.user-avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
    overflow: hidden;
    border: 2px solid var(--brand_pink);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-text {
    align-self: center;
    overflow: hidden;
    margin-left: 16px;
}

.nickname {
    color: var(--text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 1.5rem;
    font-weight: 600;
}

.description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text3);
    font-size: 12px;
    line-height: 1.5rem;
}

.v-pop-item {
    height: 44px;
    cursor: pointer;
    color: var(--text2);
    padding: 0 20px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.v-pop-item:hover {
    color: var(--brand_pink);
    background-color: var(--graph_bg_regular);
}

.v-pop-item .el-icon {
    font-size: 18px;
    margin-right: 12px;
    color: var(--text2);
}

.v-pop-item:hover .el-icon {
    color: var(--brand_pink);
}

.v-pop-item span {
    line-height: 38px;
}

.admin-aside {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1008;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.admin-aside.collapsed {
    width: 64px;
}

.aside-top {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.03);
    z-index: 2000;
    flex: 0 0 auto;
    border-bottom: 1px solid #f5f5f5;
}

.logo {
    max-width: 180px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.logo img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s;
}

.logo-small {
    width: 40px;
    height: 40px;
}

.aside-middle {
    flex: 1 1 auto;
    height: calc(100% - 104px);
    /* 减去顶部和底部的高度 */
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 0;
    scrollbar-width: thin;
    /* Firefox */
}

.aside-middle::-webkit-scrollbar {
    width: 4px;
    /* Chrome, Safari, Edge */
}

.aside-middle::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.aside-bottom {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #f5f5f5;
    color: var(--text3);
    font-size: 12px;
    padding: 0 16px;
    overflow: hidden;
}

.system-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-menu-item .el-icon,
.el-sub-menu .el-icon {
    font-size: 18px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
}

.el-menu-item:not(.is-active) .el-icon {
    color: var(--text2);
}

.collapsed .el-menu-item .el-icon,
.collapsed .el-sub-menu .el-icon {
    margin-right: 0;
}

.masking {
    position: fixed;
    z-index: 1007;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.3);
}

.admin-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    max-width: 100%;
    padding-top: 64px;
    transition: padding-left 0.3s;
    background-color: #f5f7fa;
}

/* 页面导航容器 */
.page-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: #fff;
    margin: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.page-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text1);
}

/* 刷新按钮动画 */
.page-actions .refreshing {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* element 导航元素 */
.el-menu {
    border-right: unset !important;
}

.aside-middle {
    --el-menu-active-color: var(--brand_pink);
    --el-menu-level-padding: 32px;
    --el-menu-item-height: 50px;
}

.aside-middle :deep(.el-sub-menu__title),
.el-menu-item {
    height: var(--el-menu-item-height);
    border-radius: 8px;
    margin: 4px 12px;
    padding-left: 16px !important;
    transition: all 0.3s;
}

.el-menu-item.is-active {
    background-color: var(--graph_bg_regular) !important;
    color: var(--brand_pink) !important;
    font-weight: 600;
}

.aside-middle :deep(.el-sub-menu__title:hover),
.el-menu-item:hover {
    background-color: var(--graph_bg_thin) !important;
}

.el-menu--collapse {
    width: 64px;
}

.el-menu--collapse .el-sub-menu__title span {
    display: none;
}

.admin-aside :deep(.el-menu--collapse) .el-sub-menu {
    width: 64px;
    text-align: center;
}

.admin-aside :deep(.el-menu--collapse) .el-menu-item {
    text-align: center;
}

/* 子菜单的样式 */
.el-menu--popup {
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-menu--popup .el-menu-item {
    margin: 4px 8px;
    height: 40px;
    border-radius: 6px;
}

/* 增加子菜单的层次感 */
.aside-middle :deep(.el-sub-menu .el-menu-item) {
    padding-left: 55px !important;
    background-color: #fafafa;
    margin-left: 20px;
    margin-right: 8px;
    position: relative;
}

.aside-middle :deep(.el-sub-menu .el-menu-item)::before {
    content: '';
    position: absolute;
    left: 38px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ddd;
    transform: translateY(-50%);
}

.aside-middle :deep(.el-sub-menu .el-menu-item.is-active)::before {
    background-color: var(--brand_pink);
}

/* 面包屑样式优化 */
.breadcrumb-container :deep(.el-breadcrumb__item) {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-container :deep(.el-breadcrumb__inner) {
    font-weight: normal;
    color: var(--text2);
}

.breadcrumb-container :deep(.el-breadcrumb__inner.is-link:hover) {
    color: var(--brand_pink);
}

.breadcrumb-container :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    font-weight: 600;
    color: var(--text1);
}
</style>